<template>
  <div>
    <div class="search">
      <SearchCom />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipeList" :key="item.id"
        ><img :src="imgSrc + item.imgSrc" alt=""
      /></van-swipe-item>
    </van-swipe>
    <van-tabbar
      v-model="active"
      active-color="#000"
      inactive-color="#000"
      :fixed="false"
    >
      <van-tabbar-item
        icon=""
       to="/home/list" >整租</van-tabbar-item
      >
      <van-tabbar-item
        icon=""
        to="/home/list">合租</van-tabbar-item
      >
      <van-tabbar-item
        icon=""
        to="/map">地图找房</van-tabbar-item
      >
      <van-tabbar-item
        icon=""
        to="/rent/add">去出租</van-tabbar-item
      >
    </van-tabbar>
    <div class="more">
      <h5>租房小组</h5>
      <van-row type="flex" justify="space-between">
        <van-col span="10">
          <img
            alt="图片"
            class="left"
            src="http://115.159.87.220:8080/img/groups/1.png"
          />
          <div>家住回龙观归属的感觉</div>
        </van-col>
        <van-col span="10">
          <img
            alt="图片"
            class="left"
            src="http://115.159.87.220:8080/img/groups/2.png"
          />
          <div>家住回龙观归属的感觉</div>
        </van-col>
        <van-col span="10">
          <img
            alt="图片"
            class="left"
            src="http://115.159.87.220:8080/img/groups/3.png"
          />
          <div>家住回龙观归属的感觉</div>
        </van-col>
        <van-col span="10">
          <img
            alt="图片"
            class="left"
            src="http://115.159.87.220:8080/img/groups/4.png"
          />
          <div>家住回龙观归属的感觉</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { carouselApi } from '@/api'
import { Axios } from '@/utiles/request.js'
import SearchCom from '../../components/Search/SearchCom.vue'
export default {
  data () {
    return {
      swipeList: [],
      imgSrc: '',
      active: 0
    }
  },
  async created () {
    const res = await carouselApi()
    this.swipeList = res.data.body
    console.dir(Axios.defaults.baseURL)
    this.imgSrc = Axios.defaults.baseURL
  },
  components: { SearchCom }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 212px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
/deep/.van-tabbar-item__icon img {
  width: 60px;
  height: 60px;
}
/deep/.van-tabbar-item__text {
  font-size: 14px;
  margin: 12px 0;
}
.search {
  position: absolute;
  z-index: 2;
  top: 20px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.van-tabbar--unfit {
  height: 122px;
}
.van-row--justify-space-between {
  font-size: 14px;
  img {
    width: 50px;
    height: 50px;
    margin: 0 10px;
  }
  .van-col--10 {
    display: flex;
    background-color: #fff;
    margin-bottom: 10px;
    height: 50px;
    border-radius: 4px;
    // padding: 5px;
  }
}
.more {
  background-color: #f6f5f6;
  padding: 0 20px;
  // margin-top: 50px;
  h5 {
    height: 20px;
    font-size: 15px;
    margin: 15px 0;
  }
}
</style>
